Seeing Data in Color: A Demonstration of Dimensional Interaction

In this demo, three overlapping circles—Red, Green, and Blue—serve as placeholders for separate data metrics. By leveraging the CSS property mix-blend-mode: screen on a dark background, we create an additive blending effect that highlights every point of intersection:

• Red + Green → Yellow
• Green + Blue → Cyan
• Red + Blue → Magenta
• All three → White

This simple, high-contrast approach lets viewers instantly identify where two or all three variables coincide.

Anatomy of the Graphic

1. Three Base Circles

   • Placed at distinct coordinates within the SVG canvas.
   • Radius and position can later be driven by real data values.

2. Dark Backdrop

   • Ensures that the light-based (additive) blending is vivid and true to RGB behavior.

3. mix-blend-mode: screen

   • A modern CSS/SVG feature supported by all major browsers.
   • Treats each circle like a light source, not paint, combining channels rather than subtracting them.

4. Subtle Outline

   • A faint triangular stroke ties the composition together, guiding the eye to the overall shape.

Why Color Blending Works for Multivariate Data

• Immediate Intersection Insight
  Even without numeric labels, the brain quickly parses blended hues as overlaps.
• Scalable to More Dimensions
  By varying opacity, shape, or adding additional layers (e.g., yellow, magenta, cyan bases), you can encode up to six metrics in a single view.
• Intuitive Color Logic
  We naturally associate yellow with “red plus green,” cyan with “green plus blue,” and so on—no legend needed for basic overlaps.

Advanced Use Cases

1. Panel 1: Radius ∝ Value
   Circles scale in size directly with their data metric—higher values yield larger radii. This leverages visual area perception for magnitude comparison, and when circles overlap the additive screen blend still intensifies intersecting regions, combining both size and color cues.

2. Panel 2: Glow ∝ Value
   Each circle carries its own SVG Gaussian-blur filter whose stdDeviation is driven by its value. Larger metrics produce broader, brighter halos. By applying mix-blend-mode: screen on each filtered circle, overlapping glows merge into vibrant focal zones against the dark backdrop.

3. Panel 3: Stroke & Gradient
   Here, value controls stroke width—stronger data points gain thicker white outlines. A central radial gradient overlay softly brightens the core area, guiding attention to dense intersections. The dual encoding (stroke for precision, gradient for emphasis) enriches the visual hierarchy.

From Prototype to Production

Although this example uses raw SVG in React, you can integrate the same technique into popular visualization libraries:

1. D3.js (SVG-Based)

Bind your data to each circle’s position, radius, and color:

import * as d3 from "d3";

const data = [
  { x: 200, y: 170, r: 70, color: "#ff0000" },
  { x: 160, y: 250, r: 70, color: "#00ff00" },
  { x: 240, y: 250, r: 70, color: "#0000ff" }
];

const svg = d3.select("svg")
  .attr("width", 400)
  .attr("height", 400)
  .style("background", "#000");

svg.selectAll("circle")
  .data(data)
  .join("circle")
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .attr("r", d => d.r)
    .attr("fill", d => d.color)
    .style("mix-blend-mode", "screen");

2. Chart.js (Canvas with a Plugin)

Use globalCompositeOperation = 'screen' inside a custom plugin to layer circles on your canvas:

const rgbBlendPlugin = {
  id: "rgbBlend",
  beforeDatasetsDraw(chart) {
    const ctx = chart.ctx;
    ctx.save();
    ctx.globalCompositeOperation = "screen";

    const circles = [
      { x: 200, y: 170, r: 70, color: "red" },
      { x: 160, y: 250, r: 70, color: "lime" },
      { x: 240, y: 250, r: 70, color: "blue" }
    ];

    circles.forEach(({ x, y, r, color }) => {
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.arc(x, y, r, 0, 2 * Math.PI);
      ctx.fill();
    });

    ctx.restore();
  }
};

new Chart("canvas", {
  type: "bar", // placeholder type
  data: { labels: [], datasets: [] },
  options: {
    plugins: {
      rgbBlend: true
    }
  },
  plugins: [rgbBlendPlugin]
});

Note: After drawing your circles, ctx.restore() resets the composite mode so the rest of your chart renders normally.

Browser Support & Performance

• mix-blend-mode: screen is supported in Chrome, Firefox, Safari, and Edge (including on mobile).
• Rendering three SVG circles has negligible performance impact; you can scale to dozens or hundreds if needed, though consider canvas if you exceed a few hundred shapes.

By blending simple shapes and colors, you can create immediately accessible, aesthetically engaging representations of multivariate data. Feel free to build on this example, tune the blending modes (e.g., multiply, overlay), or extend it with more dimensions—your data, your blend.

By Vince